<!-- 全国 城市选择器 页面 -->
<template>
  <div id="citypickerPage">
    <c-title :hide="false" text="选择城市"></c-title>
    <van-sticky :offset-top="40">
      <van-search v-model="cityName" show-action label="城市" placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-sticky>
    <van-index-bar :sticky-offset-top='94'>
      <block v-for="(val,key, index) in cityArr" :key="index">
        <van-index-anchor :index="key" />
        <block v-for="(itemCity, cityIndex) in val" :key="cityIndex">
          <van-cell :title="itemCity.city" @click.stop="RelatedSites(itemCity)" />
        </block>
      </block>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cityArr: [],//地址数据
      apiOptions: {},//请求地址
      cityName: ''//搜索名称
    };
  },

  components: {},

  computed: {},

  created() {
    // url ：请求地址，nextEndPage：选择城市后的方法
    let arr = new Map([
      ["cake", {
        url: "plugin.yz-supply-cake.frontend.index.index.getCity",
        nextEndPage:()=>{
          this.$router.push(this.fun.getUrl("sachertorteIndex", {}, { city: this.cityName }));
        },
      }],
      ["meituan", {
        url: "plugin.meituan-group-buy.frontend.good.city",
        nextEndPage:()=>{
          let url ='meituan_refund';
          if(this.$route.query.path == 'search'){
            url = "meituan_refund_search";
          }else if(this.$route.query.path == 'detail'){
            url = "meituan_refund_detail";
          }
          this.$router.push(this.fun.getUrl(url, {}, { city: this.cityName }));
        },
      }],
      ['dy_group_buy',{
        url:"plugin.tiktok-group-buy.api.goods.city",
        nextEndPage:()=>{
          if(this.$route.query.path == 'search'){
            this.$router.push(this.fun.getUrl('dy_group_buy_search', {}, { city: this.cityName }));
          }else{
            this.$router.replace(this.fun.getUrl('dy_group_buy', {}, { city: this.cityName }));
          }
        },
      }],
      ['local_life',{
        url:"plugin.local-life.api.category.city-list",
        nextEndPage:()=>{
          if(this.$route.query.path == 'search'){
            this.$router.push(this.fun.getUrl('local_life_search', {}, { city: this.cityName }));
          }else{
            this.$router.replace(this.fun.getUrl('local_life', {}, { city: this.cityName }));
          }
        },
      }]
    ]);
    this.apiOptions = arr.get(this.$route.query.plu);//通过plu参数匹配对应的api,因后端暂无提供商城统一的api，暂无默认api
    this.getData();
  },

  methods: {
    async getData() {
      let { result, msg, data} = await $http.post(this.apiOptions.url, { name: this.cityName },'.');
      if(result ==0) return this.$toast(msg);
      if (result == 1) {
        this.cityArr = data;
      }
    },
    RelatedSites(data) {
      let {city,id} = data;
      this.cityName = city;
      if(this.$route.query.plu=='meituan'){ //美团团购
        // localStorage.setItem("meituan_city_id",id);
        console.log(city,'city')
        this.$router.push(this.fun.getUrl("o2oCity", {}, { city,tag:"meituan" }));
        return;
      }
      if(this.$route.query.plu=='dy_group_buy'){ //抖音团购
        localStorage.setItem("dy_group_code",id);
      }
      if(this.$route.query.plu=='local_life'){ //抖音团购
        localStorage.setItem("local_life_code",id);
      }

      this.apiOptions.nextEndPage();
    },
    onSearch(){
      this.getData();
    }
  }
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#citypickerPage {
  text-align: left;

  ::v-deep .van-index-bar__sidebar {
    top: 55%;

    .van-index-bar__index {
      font-size: 14px;
      line-height: 18px;
    }
  }
}
</style>